<template>
  <div class="bg">
    <div class="content" style="display: flex">
      <van-field
        v-model.trim="cityName1"
        id="cityName1"
        :disabled="true"
        @click="showBox"
      />
      <van-field
        v-model.trim="cityName2"
        id="cityName2"
        :disabled="true"
        @click="showBox"
      />
      <van-field
        v-model.trim="cityName3"
        id="cityName3"
        :disabled="true"
        @click="showBox"
      />
      <van-field
        v-model.trim="cityName4"
        id="cityName4"
        :disabled="true"
        @click="showBox"
      />
      <van-field
        v-model.trim="cityName5"
        id="cityName5"
        :disabled="true"
        @click="showBox"
      />
      <van-field
        v-model.trim="cityName6"
        id="cityName6"
        :disabled="true"
        @click="showBox"
      />
    </div>
    <div class="box" v-show="boxShow">
      <div v-show="enJudge">
          <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in math"
            :key="item"
            @click="(e) => key(e, item)"
            >{{ item }}</van-button
          >
        </div>
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in one"
            :key="item"
            @click="(e) => key(e, item)"
            >{{ item }}</van-button
          >
        </div>
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in two"
            :key="item"
            @click="(e) => key(e, item)"
            >{{ item }}</van-button
          >
        </div>
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in three"
            :key="item"
            @click="(e) => key(e, item)"
            >{{ item }}</van-button
          ><van-button @click="()=>del()">删除</van-button>
          <van-button @click="()=>{boxShow = false}">关闭</van-button>
        </div>
      </div>
      <div v-show="!enJudge">
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in cityOne"
            :key="item.simple"
            @click="(e) => key(e, item.simple)"
            >{{ item.simple }}</van-button
          >
        </div>
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in cityTwo"
            :key="item.simple"
            @click="(e) => key(e, item.simple)"
            >{{ item.simple }}</van-button
          >
        </div>
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in cityThree"
            :key="item.simple"
            @click="(e) => key(e, item.simple)"
            >{{ item.simple }}</van-button
          >
        </div>
        <div>
          <van-button
            type="default"
            size="normal"
            v-for="item in cityFous"
            :key="item.simple"
            @click="(e) => key(e, item.simple)"
            >{{ item.simple }}</van-button
          ><van-button @click="()=>del">删除</van-button>
          <van-button @click="()=>{boxShow = false}">关闭</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { arr } from "./city";
export default {
  data() {
    return {
      one: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
      two: ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
      three: ["Z", "X", "C", "V", "B", "N", "M", "."],
      math: [0,1,2,3,4,5,6,7,8,9],
      enJudge: false,
      boxShow: false,
      city: arr,
      cityName1: "",
      cityName2: "",
      cityName3: "",
      cityName4: "",
      cityName5: "",
      cityName6: "",
      keyValue: '',
      name: '',
      num: 0,
    };
  },
  methods: {
    key: function (e, val) {
        if(this.cityName6 === '') {
            this.num++
        if(this.num > 6) {this.num = 6}
      switch(this.num) {
          case 1:
              this.cityName1 = val
              break
          case 2:
              this.cityName2 = val
              break
          case 3:
              this.cityName3 = val
              break
          case 4:
              this.cityName4 = val
              break
          case 5:
              this.cityName5 = val
              break
          case 6:
              this.cityName6 = val
              break
      }
      this.keyValue = val
        } 
    },
    del () { 
        
        // let reg = /[0-9]/g
        // this.num = Number.parseInt(this.name.match(reg)[0]) + 1
      switch(this.num--) {
          case 1:
              this.cityName1 = ''
              break
          case 2:
              this.cityName2 = ''
              break
          case 3:
              this.cityName3 = ''
              break
          case 4:
              this.cityName4 = ''
              break
          case 5:
              this.cityName5 = ''
              break
          case 6:
              this.cityName6 = ''
              break
      }
    },
    showBox () {
        this.boxShow = true
    }
  },
  computed: {
    cityOne() {
      return this.city.slice(0, 9);
    },
    cityTwo() {
      return this.city.slice(9, 18);
    },
    cityThree() {
      return this.city.slice(18, 27);
    },
    cityFous() {
      return this.city.slice(27, this.city.length);
    },
  },
  watch: {
    cityName1: function (val) {
        if(val === '') {
            this.enJudge = false
            
        } else {
            this.enJudge = true
        }
    },
  },
  mounted() {
    let self = this;
    $.ajax({
      type: "get", //接口规定，只能用get
      async: true, //异步
      url: "https://apis.map.qq.com/ws/location/v1/ip", //接口地址
      data: { key: "6K5BZ-I35WS-EYLO5-6BSKV-EV4VH-J2FPM", output: "jsonp" }, //参数格式必须用到output传参为jsonp，否则会报跨域问题
      dataType: "jsonp", //跨域，必须用到jsonp
      success: function (obj) {
        let arr = self.city.find((res) => {
          return res.name === obj.result.ad_info.province;
        });
        self.cityName1 = arr.simple;
        self.enJudge = true;
        self.num = 1
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(JSON.stringify(XMLHttpRequest));
        document.write(JSON.stringify(XMLHttpRequest));
      },
    });
    // this.cityName1 = arr.simple
  },
};
</script>

<style>
.bg {
  background-color: wheat;
}
.box {
  background-color: wheat;
  position: absolute;
  bottom: 2rem;
  width: 100%;
}
.box .van-button--normal {
  margin-left: 0.5rem;
}
.content .van-button {
  width: 1rem;
  margin: 1rem;
  height: 1rem;
  font-size: 2rem;
}
.content .van-field__control {
  width: 2rem;
  height: 2rem;
  background-color: slategrey;
  text-align: center;
  font-size: 1rem;
}
*{
    margin: 0px;
    padding: 0px;
}
</style>